<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhaoxiaodong
 * @Date: 2020-09-01 16:46:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-30 14:50:38
-->
<template>
  <div class="fast-certification">
    <cloudBreadcrumb :routes="routes"></cloudBreadcrumb>
    <div class="fast-certification-header">
      <div class="title">
        新建快速认证
      </div>
      <div class="record">
        <cloudButton class="record__button" @click="getFastCheckRecordUrl">
          快速认证订单记录 >
        </cloudButton>
      </div>
    </div>
    <div class="fast-certification-content">
      <CloudDoubleUpload
        v-if="!fileInfo"
        class="upload-file"
        :action="action"
        :fileType="fileType"
        :fileFormatTip="fileFormatTip"
        :successFormatTip="false"
        @finishUpload="finishUpload"
        :defaultSize="50"
        :tips="tips"
      >
      </CloudDoubleUpload>
      <div class="app-detail" v-else>
        <div class="app-detail-top">
          <div class="app-detail-top-head">
            <span class="label"
              >应用：<span :title="fileInfo.name">{{
                fileInfo.name
              }}</span></span
            >
            <span class="label"
              >大小：{{
                fileInfo.size ? (fileInfo.size / 1024 / 1024).toFixed(2) : ""
              }}MB</span
            >
            <cloudPopover placement="rightTop" v-if="appInfo.packageType != 3">
              <div slot="content" class="popover-info">
                <div class="info-item">
                  <span class="label">创建人</span>
                  <span class="item">{{ appInfo.createCustomer }}</span>
                </div>
                <div class="info-item">
                  <span class="label">创建单位</span>
                  <span class="item">{{ appInfo.createOrgName }}</span>
                </div>
                <div class="info-item" v-if="appInfo.createDate">
                  <span class="label">创建时间</span>
                  <span class="item">{{ appInfo.createDate }}</span>
                </div>
                <div class="info-item" v-if="appInfo.version">
                  <span class="label">适配平台</span>
                  <span class="item">{{ appInfo.version }}</span>
                </div>
              </div>
              <span class="label"
                ><app-icon
                  class="application-package-information"
                  iconName="vcloud-application-package-information"
                />应用包信息</span
              >
            </cloudPopover>
          </div>
          <div class="app-detail-top-progress">
            <div class="progress">
              <cloudProgress
                :percent="percent"
                :status="status"
              ></cloudProgress>
              <div style="height:30px; margin-left: 8px; margin-top: -3px;">
                <span class="form" v-if="appInfo.formTotal"
                  >表单数：{{ appInfo.formTotal }}</span
                >
                <!-- v-if="!obsFileId" -->
                <cloudButton type="primary" @click="uploadAgain"
                  >重新上传</cloudButton
                >
              </div>
            </div>
            <div class="tip">
              <span
                class="success"
                v-if="
                  appInfo.keyId != 'appInfoInitState' && status == 'success'
                "
              >
                <span class="success-title">
                  <app-icon
                    class="success-title-icon"
                    iconName="vcloud-tongguo"
                  />检查通过</span
                >
                <span
                  class="success-detail"
                  v-if="appInfo.message != 'success'"
                >
                  {{ appInfo.message }}</span
                >
              </span>
              <span class="error" v-if="status == 'exception'">
                <span class="error-title"
                  ><app-icon
                    class="error-title-icon"
                    iconName="vcloud-tanhao"
                  />检查未通过！</span
                >
                <span class="error-detail"> {{ appInfo.message }}</span>
              </span>
            </div>
          </div>
          <div class="app-detail-top-form">
            <div class="form-title">
              包含应用
            </div>
            <div class="form-content">
              <div
                class="form-item"
                v-for="(item, index) in appInfo.apps"
                :key="index"
              >
                <span class="name" :title="item.appName">{{
                  item.appName
                }}</span>
                <span class="label">表单数量：{{ item.formTotal }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="app-detail-top-tip" v-if="form.packageSource == 4">
          <span class="warning">
            <span class="warning-title"
              ><app-icon
                class="warning-title-icon"
                iconName="vcloud-tanhao"
              />聚合应用安装必读，请详细阅读聚合应用安装指南，</span
            >
            <span class="warning-harf" @click="linkHelp">点击查看 ></span>
          </span>
        </div>
        <div class="app-detail-middle">
          <div class="app-detail-middle-head">
            <span class="label">
              <span v-if="appInfo.packageType === 3">组件名称</span>
              <span v-else>应用名称</span>
            </span>
            <span class="input">
              <cloudInput
                :maxLength="30"
                placeholder="请输入应用名称"
                v-model="form.orderName"
                @changeVal="changeVal"
              ></cloudInput
            ></span>
            <span class="label" v-if="appInfo.packageType != 3">应用版本</span>
            <span class="small-input" v-if="appInfo.packageType != 3">
              <CloudInputNumber
                v-model="versions[0]"
                disabled
                :min="0"
                :max="9"
              />
              <span class="dot">.</span>
              <CloudInputNumber
                v-model="versions[1]"
                disabled
                :min="0"
                :max="9"
              />
              <span class="dot">.</span>
              <CloudInputNumber
                v-model="versions[2]"
                @blur="blurNumber"
                :formatter="formatterNumber"
                :min="0"
                :max="9"
              />
              <span class="dot">.</span>
              <CloudInputNumber
                v-model="versions[3]"
                @blur="blurNumber"
                :formatter="formatterNumber"
                :min="0"
                :max="9"
              />
            </span>
          </div>
          <div class="app-detail-middle-head-tip">
            <span class="error" v-if="orderNameTip">
              <span class="error-title"
                ><app-icon class="error-title-icon" iconName="vcloud-tanhao" />
                应用名称不能为空！</span
              >
            </span>
          </div>
          <div class="app-detail-middle-content">
            <div class="app-detail-middle-left">
              <div class="left-title">
                授权使用单位
              </div>
              <div class="left-company">
                <span class="label">指定单位</span>
                <span class="input">
                  <cloudInput
                    :maxLength="50"
                    v-model="company.code"
                    placeholder="请输入加密狗号或统一社会信用代码"
                    :disabled="appInfo.backupApp"
                    @changeVal="changeCode"
                  ></cloudInput>
                </span>
                <span class="button">
                  <cloudButton
                    style="width: 88px;"
                    type="primary"
                    @click="checkCode"
                    :disabled="
                      appInfo.keyId == 'appInfoInitState' || appInfo.backupApp
                    "
                    >验证</cloudButton
                  >
                </span>

                <cloudPopover
                  v-if="company.status"
                  overlayClassName="history-cloud-Popover"
                  placement="bottomLeft"
                >
                  <div slot="content" class="history-record">
                    <CloudTable
                      class="history-table"
                      :columns="columns"
                      :dataSource="historyData"
                      :scroll="{ y: 228 }"
                    >
                    </CloudTable>
                  </div>
                  <span class="info">
                    <app-icon
                      iconName="vcloud-yingyongshuxing"
                      className="title__icon"
                    ></app-icon>
                    历史记录
                  </span>
                </cloudPopover>
              </div>
              <div class="left-company-tip" v-if="company.message">
                <span class="error">
                  <span class="error-title"
                    ><app-icon
                      class="error-title-icon"
                      iconName="vcloud-tanhao"
                    />{{ company.message }}</span
                  >
                </span>
              </div>
              <div class="left-content">
                <div
                  v-for="item in company.info"
                  :key="item.orgId"
                  class="company-list"
                >
                  <div class="left-item">
                    <span class="name">单位名称</span>
                    <span class="label">{{ item.name }}</span>
                  </div>
                  <div class="product">
                    <CloudRadioGroup
                      class="product-radio"
                      :list="item.products"
                      v-model="form.prodId"
                      @changeRadio="changeProductRadio"
                    ></CloudRadioGroup>
                  </div>
                </div>
                <div class="number" v-if="appInfo.whiteListUser">
                  <span class="label">授权使用次数</span>
                  <span class="input">
                    <CloudInputNumber
                      :maxLength="20"
                      v-model="form.installLimit"
                      :min="1"
                      :max="20"
                      :formatter="limitNumber"
                      placeholder="请输入授权使用次数"
                    ></CloudInputNumber>
                  </span>
                </div>
                <div class="remark">
                  <span class="label">备注</span>
                  <span class="textarea">
                    <CloudTextarea
                      :maxLength="100"
                      :rows="4"
                      v-model="form.remark"
                      placeholder="请输入"
                    ></CloudTextarea>
                  </span>
                </div>
              </div>
            </div>
            <div class="app-detail-middle-right">
              <div class="right-title">
                本单位信息
              </div>
              <div class="right-content">
                <div class="right-item">
                  <span class="name">单位名称</span>
                  <span class="label">{{
                    $store.state.user.userInfo.cloudAccountName
                  }}</span>
                </div>
                <div class="right-item">
                  <span class="name">统一社会信用代码</span>
                  <span
                    class="label"
                    v-if="$store.state.user.userInfo.cloudCode"
                    >{{ $store.state.user.userInfo.cloudCode }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="app-bottom" v-if="fileInfo">
        <cloudButton
          type="primary"
          @click="fastCheckSubmit"
          :disabled="!company.status"
          >确 定</cloudButton
        >
        <cloudButton @click="uploadAgain">取 消</cloudButton>
      </div>
    </div>
    <CloudDialog
      :visible="dialogVisible"
      cancelText="完成"
      okText="认证记录"
      title="认证提示"
      contentTitle="提交认证成功"
      @ok="getFastCheckRecordUrl"
      @cancel="submit"
      cancelType="primary"
      contentText="系统将会在5分钟内自动完成认证，您可以在商家后台-快速认证记录，打开认证单下载认证包。"
    ></CloudDialog>
  </div>
</template>

<script>
import {
  CloudBreadcrumb,
  CloudSearch,
  CloudDoubleUpload,
  CloudInputNumber,
  CloudInput,
  CloudButton,
  CloudPopover,
  CloudProgress,
  CloudDialog,
  CloudRadioGroup,
  CloudTextarea,
  CloudTable,
} from "cloud-components";
import { openWin } from "cloud-common/tool/tool";
export default {
  name: "fastCertification",
  data() {
    return {
      loading: false,
      action: "/designgateway/designCenter/obs/upload",
      fileType: ["syz", "mdm", "byz", "zip", "ddz"],
      tips: [
        "仅支持单个包上传，大小不超过50M，文件格式支持：Syz（应用包）、Zip（组件包）、Mdm（基础数据包）、Byz（聚合包）、Ddz（脱敏包）",
        "注：商品包和试用包不能做快速认证",
      ],
      versions: [],
      dialogVisible: false,
      orderNameTip: false,
      percent: 0,
      status: "active",
      appInfo: {
        createAccountName: "",
        createDate: "",
        createUserName: "",
        version: "",
        fileId: "",
        keyId: "appInfoInitState",
        version: "",
        apps: [],
        packageType: 0,
        backupApp: false,
        message: "",
      },
      fileInfo: null,
      obsFileId: null,
      company: {
        code: "",
        info: [],
        message: "",
        status: false,
      },
      historyOrder: {
        corpId: null,
        goodsAppId: "",
      },
      form: {
        keyId: "",
        orderName: "",
        transferredOrgId: "",
        prodId: "",
        goodsAppVersion: "",
        orderFrom: "CDC",
        // packageSource: 4,
        installLimit: 1,
        cdcStationAppId: null,
        remark: "",
      },
      columns: [
        {
          title: "应用包名称",
          dataIndex: "goodsName",
          ellipsis: true,
          width: 180,
        },
        {
          title: "表单数量",
          dataIndex: "formTotal",
        },
        {
          title: "订单创建时间",
          dataIndex: "certificateTime",
          width: 160,
        },
      ],
      historyData: [],
      routes: [
        {
          path: "/index",
          breadcrumbName: "工具箱",
        },
        {
          path: "/fastCertification",
          breadcrumbName: "应用快速认证",
        },
      ],
    };
  },
  components: {
    cloudBreadcrumb: CloudBreadcrumb,
    cloudSearch: CloudSearch,
    CloudDoubleUpload: CloudDoubleUpload,
    CloudInputNumber: CloudInputNumber,
    cloudProgress: CloudProgress,
    cloudPopover: CloudPopover,
    cloudInput: CloudInput,
    cloudButton: CloudButton,
    CloudDialog: CloudDialog,
    CloudRadioGroup,
    CloudTextarea,
    CloudTable,
  },
  computed: {},

  created() {
    const query = this.$route.query;
    this.obsFileId = query.obsFileId;
    if (query.obsFileId) {
      this.fileInfo = {
        name: this.obsFileId,
      };
      this.form.orderFrom = query.orderFrom ? query.orderFrom : "CDC_STATION";
      this.form.cdcStationAppId = query.id;
      // this.form.packageSource = this.checkPackageType(this.obsFileId);
      let type = this.fileType.filter(
        type => this.fileInfo.name.indexOf(type) >= 0
      );
      this.form.orderName = this.fileInfo.name.split(`.${type}`)[0];
      this.fastCheckAuth(query.obsFileId);
    }
  },

  methods: {
    // checkPackageType(filePath) {
    //   //获取最后一个.的位置
    //   let index = filePath.lastIndexOf("."),
    //     //获取后缀
    //     ext = filePath.substr(index + 1);
    //   if (ext == "byz") {
    //     ext = 4;
    //   } else {
    //     ext = 5;
    //   }
    //   return ext;
    // },
    formatterNumber(value) {
      let ext = value;
      if (!value) ext = 0;
      return ext;
    },
    formatString(value) {
      let ext = value;
      if (this.appInfo.goodsAppVersion) {
        if (!value) {
          ext = "0";
        } else {
          ext = value.toString();
        }
      }
      return ext;
    },
    blurNumber() {
      if (this.appInfo.goodsAppVersion) {
        const initVersions = this.appInfo.goodsAppVersion.split(".");
        let initV = "",
          changeV = "";
        initVersions.map(val => {
          initV += this.formatString(val);
        });
        this.versions.map(val => {
          changeV += this.formatString(val);
        });
        if (Number(changeV) < Number(initV)) {
          this.versions = initVersions;
        }
      }
    },
    onSearch(value) {},
    changeVal(value) {
      this.form.orderName = value;
      if (value == "") {
        this.orderNameTip = true;
      } else {
        this.orderNameTip = false;
      }
    },
    changeCode(value) {
      this.company.code = value;
    },
    changeProductRadio(value) {
      // this.from.prodId = value;
      this.company.info.map(item => {
        item.products.map(opt => {
          if (opt.value == value) {
            this.historyOrder.corpId = opt.corpId;
            this.form.transferredOrgId = item.orgId;
          }
        });
      });
      this.fastOrderHistory();
    },
    checkCode() {
      if (this.company.code == "" || !this.company.code) {
        this.company = {
          code: "",
          info: [],
          message: "",
          status: false,
        };
        this.company.message = "指定单位不能为空！";
        return false;
      }
      this.$cloudLoading.show("Loading");
      this.api
        .fastCheckAccount(
          {
            params: {
              keyId: this.form.keyId,
              code: this.company.code,
            },
          },
          { customRequest: true, method: "get" }
        )
        .then(res => {
          this.$cloudLoading.hide();
          this.company.info = res.data;
          this.historyData = [];
          this.company.info.map(item => {
            let arr = [];
            item.products.map(opt => {
              arr.push({
                value: opt.prodId,
                title: `${opt.prodType}（狗号${opt.dogNo}）`,
                corpId: opt.corpId,
              });
            });
            item.products = arr;
            if (arr.length > 0 || this.appInfo.backupApp) {
              this.company.status = true;
            }
            return item;
          });
          if (
            this.company.info.length > 0 &&
            this.company.info[0].products.length > 0
          ) {
            this.form.prodId = this.company.info[0].products[0].value;
            this.form.transferredOrgId = this.company.info[0].orgId;
            this.historyOrder.corpId = this.company.info[0].products[0].corpId;
            if (this.appInfo.packageType != 3 && this.historyOrder.corpId) {
              this.fastOrderHistory();
            }
          }
          this.company.message = "";
        })
        .catch(e => {
          this.$cloudLoading.hide();
          this.company.info = [];
          this.company.status = false;
          this.company.message = e.msg;
        });
    },
    fastOrderHistory() {
      if (this.appInfo.apps && this.appInfo.apps.length > 0) {
        let appId = this.appInfo.apps[0].appId;
        if (this.appInfo.apps.length > 1) {
          appId = this.appInfo.apps.filter(app => app.mainAppFlag == true)[0]
            .appId;
        }
        this.historyOrder.goodsAppId = appId;
      }
      this.api
        .fastOrderHistory(
          {
            params: { ...this.historyOrder },
          },
          { customRequest: true, method: "get" }
        )

        .then(res => {
          this.historyData = res.data;
        });
    },
    getFastCheckRecordUrl() {
      let url = encodeURI(
        encodeURI(
          `${process.env.VUE_APP_seeyonCloudUrl}/shopadmin/fastAuthentication`
        )
      );
      this.linkRecord(url);
    },
    linkRecord(url) {
      this.dialogVisible = false;
      openWin(url, "认证记录");
    },
    linkHelp() {
      openWin(
        "https://www.kancloud.cn/cap_pm/cloud-dc-help/1931699",
        "安装指南"
      );
    },
    limitNumber(value) {
      if (typeof value === "string") {
        return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, "") : "";
      } else if (typeof value === "number") {
        return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, "") : "";
      } else {
        return "";
      }
    },
    uploadAgain() {
      this.percent = 0;
      this.appInfo = {
        createAccountName: "",
        createDate: "",
        createUserName: "",
        version: "",
        fileId: "",
        keyId: "appInfoInitState",
        version: "",
        apps: [],
        packageType: 0,
        backupApp: false,
        message: "",
        cdcStationAppId: null,
      };
      this.fileInfo = null;
      this.company = {
        code: "",
        info: [],
        message: "",
        status: false,
      };
      this.status = "active";
      this.versions = [];
      this.form = {
        keyId: "",
        orderName: "",
        transferredOrgId: "",
        prodId: "",
        goodsAppVersion: "",
        orderFrom: "CDC",
        // packageSource: 4,
        installLimit: 1,
        remark: "",
      };
    },
    fastCheckAuth(fileId) {
      this.api
        .fastCheckAuth(
          {
            fileId: fileId,
            // corpId: "",
          },
          {
            customRequest: true,
            onUploadProgress(a) {
              this.percent = parseInt(100 * (a.loaded / a.total));
            },
          }
        )
        .then(res => {
          this.loading = false;
          this.percent = 100;
          if (res.code == 200) {
            this.status = "success";
            this.appInfo = res.data;
            this.appInfo.message = res.message;
            this.versions = res.data.goodsAppVersion
              ? res.data.goodsAppVersion.split(".")
              : [];
            this.versions[3] = Number(this.versions[3]) + 1;
            this.fileInfo.size = this.appInfo.fileSize;
            this.form.keyId = this.appInfo.keyId;
            if (this.appInfo.backupApp) {
              this.company.code = res.data.hisTransferredOrgId
                ? res.data.hisTransferredOrgId
                : "";
              this.checkCode();
            }
          }
        })
        .catch(e => {
          this.loading = false;
          this.appInfo.message = e.msg;
          this.percent = 100;
          this.status = "exception";
        });
    },
    submit() {
      this.dialogVisible = false;
      this.uploadAgain();
    },
    fastCheckSubmit() {
      if (!this.company.info) {
        this.$cloudMessage.warning(`请先验证指定单位！`);
        return false;
      }
      if (this.form.orderName == "") {
        this.orderNameTip = true;
        return false;
      }
      this.form.goodsAppVersion = this.versions.join(".");
      this.$cloudLoading.show("Loading");
      this.api
        .fastCheckSubmit(
          {
            ...this.form,
          },
          { customRequest: true, method: "post" }
        )
        .then(res => {
          if (res.code == 200) {
            // this.appInfo = res.data;
            this.$cloudLoading.hide();
            this.dialogVisible = true;
          }
        })
        .catch(e => {
          this.$cloudLoading.hide();
        });
    },
    finishUpload(file) {
      this.fileInfo = file;
      // this.form.packageSource = this.checkPackageType(this.fileInfo.name);
      let type = this.fileType.filter(
        type => this.fileInfo.name.indexOf(type) >= 0
      );
      this.form.orderName = this.fileInfo.name.split(`.${type}`)[0];
      if (file.response.code == "200") {
        this.fastCheckAuth(file.response.data.id);
      }
    },
  },
  computed: {
    fileFormatTip() {
      return `请上传${this.fileType.join(",")}文件！`;
    },
  },
};
</script>

<style lang="scss">
.fast-certification {
  margin: auto;
  max-width: 1260px;
  padding: 10px 0 30px 0;
  &-header {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 5px;
    .title {
      font-weight: 500;
      color: #333333;
      line-height: 30px;
    }
    .record {
      display: inline-block;
      .record__button {
        height: 30px;
        background: rgba(235, 240, 255, 1);
        border-radius: 2px;
        color: rgba(62, 112, 255, 1);
        border: none;
      }
    }
  }

  &-content {
    .app-detail {
      background: #ffffff;
      border: 1px solid rgba(51, 108, 251, 0.2);
      border-radius: 6px;
      padding: 20px;
      &-top {
        background: #eff3f9;
        border-radius: 6px;
        padding: 20px 30px;
        &-head {
          .label {
            margin-right: 50px;
            color: #333333;
            font-size: 16px;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 600px;
            .application-package-information {
              color: #336cfb;
              font-size: 20px;
              margin-right: 2px;
              margin-right: 4px;
              vertical-align: middle;
              /* margin-top: 2px; */
              padding-bottom: 2px;
            }
          }
        }
        &-progress {
          padding-left: 20px;
          margin-top: 8px;
          .progress {
            display: inline-flex;
            .ant-progress {
              width: 600px;
            }
            .form {
              margin: 0 36px 0 28px;
            }
            .cloud-button.ant-btn-primary {
              color: #ffffff;
              background: #336cfb;
              border: 1px solid #336cfb;
              border-radius: 15px;
              width: 110px;
              height: 30px;
              margin-left: 4px;
            }
          }
          .tip {
            width: 600px;
            margin-top: -20px;
          }
          .error {
            margin-top: 10px;
            display: flex;
            &-title {
              font-size: 16px;
              font-weight: 500;
              color: #ff4141;
              &-icon {
                width: 16px;
                height: 16px;
                margin-right: 4px;
              }
            }
            &-detail {
              flex: 1;
              font-size: 12px;
              font-weight: 400;
              display: inline-block;
              padding-right: 20px;
              color: #ff4141;
              padding-top: 5px;
            }
          }
          .success {
            margin-top: 10px;
            display: flex;
            font-weight: 500;
            color: #7ed321;
            font-size: 16px;
            .success-title-icon {
              margin-right: 4px;
              font-size: 18px;
            }
            &-detail {
              margin-left: 6px;
              flex: 1;
              font-size: 12px;
              font-weight: 400;
              display: inline-block;
              padding-right: 20px;
              color: #7ed321;
              padding-top: 5px;
            }
          }
        }
        &-form {
          margin-top: 20px;
          .form-title {
            font-size: 16px;
            font-weight: 500;
            color: #333333;
          }
          .form-content {
            padding-left: 20px;
            width: 400px;
            .form-item {
              margin-top: 10px;
              font-size: 14px;
              font-weight: 500;
              color: #333333;
              display: flex;
              .name {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-right: 10px;
              }
              .label {
                width: 90px;
              }
            }
          }
        }
      }
      &-top-tip {
        .warning {
          .warning-title {
            color: #f5a623;
            font-size: 12px;
            margin-left: 28px;
            height: 17px;
            margin-top: 4px;
          }
          .warning-harf {
            color: #336cfb;
            font-size: 12px;
            cursor: pointer;
          }
          .warning-title-icon {
            margin-right: 2px;
            font-size: 14px;
          }
        }
      }
      &-middle {
        padding: 22px 30px 10px;
        &-head {
          .label {
            margin-right: 15px;
            font-weight: 500;
            color: #333333;
          }
          .input {
            width: 342px;
            display: inline-block;
            margin-right: 62px;
            .ant-input {
              padding: 0 10px;
              font-size: 14px;
            }
          }

          .small-input {
            .ant-input-number {
              width: 30px;
            }
            .ant-input-number-input {
              padding: 0 10px;
            }
            .ant-input-number-handler-wrap {
              display: none;
            }
          }
          .dot {
            width: 16px;
            line-height: 32px;
            text-align: center;
            display: inline-block;
            color: #333333;
          }
        }
        &-head-tip {
          color: #ff4141;
          font-size: 12px;
          margin-left: 72px;
          height: 17px;
          margin-top: 4px;
          .error-title-icon {
            font-size: 14px;
          }
        }
        &-content {
          margin-top: 3px;
          display: flex;
          .app-detail-middle-left {
            width: 744px;
            border-right: 1px solid #dfdfdf;
            .left-title {
              color: #333333;
              font-size: 16px;
              margin-bottom: 10px;
              font-weight: 600;
            }
            .left-company {
              padding-left: 20px;
              .label {
                font-size: 14px;
                color: #333333;
                margin-right: 15px;
              }
              .input {
                width: 342px;
                display: inline-block;
                margin-right: 32px;
                .ant-input {
                  padding: 0 10px;
                  font-size: 14px;
                }
              }
              .button {
                display: inline-block;
                vertical-align: middle;
                .cloud-button.ant-btn-primary {
                  color: #336cfb;
                  background-color: #ebf0ff;
                  border: none;
                  border-radius: 16px;
                }
                .cloud-button .ant-btn.disabled,
                .ant-btn[disabled] {
                  color: rgba(0, 0, 0, 0.25);
                  background-color: #f5f5f5;
                  border-color: #d9d9d9;
                }
              }
              .ant-popover-placement-rightBottom .ant-popover-inner-content {
                padding: 0;
              }
              .info {
                font-size: 16px;
                color: #333333;
                .title__icon {
                  color: #336cfb;
                  font-size: 19px;
                  margin-right: 2px;
                  margin-left: 12px;
                  vertical-align: sub;
                  /* margin-top: 2px; */
                  // padding-bottom: 2px;
                }
              }
            }
            .left-company-tip {
              color: #ff4141;
              font-size: 12px;
              margin-left: 72px;
              padding-left: 20px;
              height: 17px;
              margin-top: 4px;
              .error-title-icon {
                font-size: 14px;
                margin-right: 4px;
              }
            }
            .left-content {
              margin-top: 20px;
              padding-left: 20px;
              .company-list {
                margin-bottom: 20px;
              }
              .left-item {
                margin-top: 12px;
                display: flex;
                .name {
                  display: inline-block;
                  margin-right: 15px;
                  color: #666666;
                  width: 64px;
                }
                .label {
                  font-weight: 500;
                  color: #333333;
                  word-break: break-all;
                  max-width: 440px;
                }
              }
              .number {
                margin-left: -28px;
                .label {
                  font-size: 14px;
                  color: #333333;
                  margin-right: 15px;
                }
                .input {
                  width: 342px;
                  display: inline-block;
                  .cloud-input-number {
                    width: 100%;
                  }
                }
              }
              .remark {
                margin-left: 28px;
                margin-top: 20px;
                .label {
                  font-size: 14px;
                  color: #333333;
                  margin-right: 15px;
                  vertical-align: top;
                }

                .textarea {
                  width: 342px;
                  display: inline-block;
                }
              }
              .product {
                padding-left: 79px;
                .product-radio {
                  color: #373737;
                  display: flex;
                  flex-flow: column;
                  .cloud-radio {
                    margin-top: 16px;
                  }
                }
              }
              .left-item:first-child {
                margin-top: 0;
              }
            }
          }
          .app-detail-middle-right {
            padding-left: 69px;
            .right-title {
              color: #333333;
              font-size: 16px;
              font-weight: 600;
            }
            .right-content {
              .right-item {
                margin-top: 12px;
                .name {
                  width: 132px;
                  font-size: 14px;
                  color: #666666;
                  display: inline-block;
                  margin-right: 15px;
                  text-align: right;
                }
                .label {
                  font-size: 14px;
                  color: #333333;
                  display: inline-block;
                  font-weight: 600;
                }
              }
            }
          }
        }
      }
    }
    .app-bottom {
      margin-top: 32px;
      text-align: center;
      .cloud-button.ant-btn-primary {
        color: #ffffff;
        background: #336cfb;
        border: none;
        border-radius: 15px;
        margin-right: 53px;
        width: 124px;
        height: 30px;
      }
      .cloud-button .ant-btn.disabled,
      .ant-btn[disabled] {
        color: rgba(0, 0, 0, 0.25);
        background-color: #f5f5f5;
        border-color: #d9d9d9;
      }
      .cloud-button.ant-btn-default {
        color: #336cfb;
        background: #ffffff;
        width: 124px;
        height: 30px;
        border: 1px solid #336cfb;
        border-radius: 15px;
      }
    }
  }
}
.popover-info {
  padding: 8px 4px;
  .info-item {
    margin-bottom: 12px;
    .label {
      margin-right: 14px;
      width: 56px;
      font-size: 14px;
      color: #666666;
      display: inline-block;
      vertical-align: top;
      text-align: right;
    }
    .item {
      width: 250px;
      color: #333333;
      font-size: 14px;
      display: inline-block;
    }
  }
  .info-item:last-child {
    margin-bottom: 0;
  }
}
.history-cloud-Popover .ant-popover-inner-content {
  padding: 0;
  .history-record {
    width: 460px;
    min-height: 260px;
  }
}
</style>
<style scoped>
::-webkit-scrollbar-thumb {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  opacity: 0.9;
  background: #a9a9a9;
}
</style>
